import React, { useState } from 'react';
import { Form, Button, Input, Modal, TreeSelect } from 'antd';
import request from '@/utils/request';
import { PlusOutlined } from '@ant-design/icons';
import Categories from '@/pages/admin/categories';

const menuFun = (result: []) => {
  var items: any = [];
  if (result != null) {
    result.forEach((item: any) => {
      var obj = {
        title: item.categoryName,
        value: item.categoryIndex,
        key: item.categoryIndex,
        children: menuFun(item.children),
      };
      items.push(obj);
    });
  }
  return items;
};
export interface CategoryProps {
  layout: string;
  width?: any;
  cRef?: any;
  name?: any;
  label?: string;
  required?: boolean;
  placeholder?: string;
  multiple: boolean;
}
const CategoryComponent: React.FC<CategoryProps> = (props: CategoryProps) => {
  const [dataSource, setDataSource] = useState<any[]>([]);
  const [visible, setVisible] = useState<boolean>(false);
  const [value, setValue] = useState<any[]>([]);
  const switchModal = () => {
    setVisible(!visible);
    refreshData();
  };
  const refreshData = () => {
    request('/api/services/app/Category/GetTreeListAsync', {
      method: 'GET',
      params: { layout: props.layout }
    }).then(
      (response) => {
        if (response) {
          if (response.success) {
            var items: any = [];
            var result = response.result;
            items = menuFun(result);
            setDataSource(items);
          }
        }
      },
    );
  };
  const tProps = {
    treeData: dataSource,
    value,
    onChange: setValue,
    treeCheckable: true,
    showCheckedStrategy: TreeSelect.SHOW_ALL,
    placeholder: '选择菜单权限',
    style: {
      width: props.width,
    },
  };
  React.useEffect(() => {
    request('/api/services/app/Category/GetTreeListAsync', {
      method: 'GET',
      params: { layout: props.layout }
    }).then(
      (response) => {
        if (response) {
          if (response.success) {
            var items: any = [];
            var result = response.result;
            items = menuFun(result);
            setDataSource(items);
          }
        }
      },
    );
  }, []);
  return (
    <>
      <Form.Item label={props.label} style={{ marginBottom: 0 }}>
        <Input.Group compact>
          <Form.Item
            name={props.name}
            rules={[
              {
                required: props.required,
                message: (props.label ? props.label : props.placeholder) + '必填',
              },
            ]}
          >
            <TreeSelect {...tProps} multiple={props.multiple} />
          </Form.Item>
          <Form.Item>
            <Button icon={<PlusOutlined />} onClick={switchModal} />
          </Form.Item>
        </Input.Group>
      </Form.Item>
      <Modal
        title={props.layout}
        visible={visible}
        destroyOnClose={true}
        onCancel={switchModal}
        footer={false}
      >
        <Categories layout={props.layout} size="small" />
      </Modal>
    </>
  );
};
export default CategoryComponent;
